<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            button {
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <button>这是第0个按钮</button><button>这是第1个按钮</button><button>这是第2个按钮</button
        ><button>这是第3个按钮</button><button>这是第4个按钮</button><button>这是第5个按钮</button
        ><button>这是第6个按钮</button><button>这是第7个按钮</button><button>这是第8个按钮</button
        ><button>这是第9个按钮</button><button>这是第10个按钮</button><button>这是第11个按钮</button
        ><button>这是第12个按钮</button><button>这是第13个按钮</button><button>这是第14个按钮</button
        ><button>这是第15个按钮</button><button>这是第16个按钮</button><button>这是第17个按钮</button
        ><button>这是第18个按钮</button><button>这是第19个按钮</button><button>这是第20个按钮</button
        ><button>这是第21个按钮</button><button>这是第22个按钮</button><button>这是第23个按钮</button
        ><button>这是第24个按钮</button><button>这是第25个按钮</button><button>这是第26个按钮</button
        ><button>这是第27个按钮</button><button>这是第28个按钮</button><button>这是第29个按钮</button
        ><button>这是第30个按钮</button><button>这是第31个按钮</button><button>这是第32个按钮</button
        ><button>这是第33个按钮</button><button>这是第34个按钮</button><button>这是第35个按钮</button
        ><button>这是第36个按钮</button><button>这是第37个按钮</button><button>这是第38个按钮</button
        ><button>这是第39个按钮</button><button>这是第40个按钮</button><button>这是第41个按钮</button
        ><button>这是第42个按钮</button><button>这是第43个按钮</button><button>这是第44个按钮</button
        ><button>这是第45个按钮</button><button>这是第46个按钮</button><button>这是第47个按钮</button
        ><button>这是第48个按钮</button><button>这是第49个按钮</button><button>这是第50个按钮</button
        ><button>这是第51个按钮</button><button>这是第52个按钮</button><button>这是第53个按钮</button
        ><button>这是第54个按钮</button><button>这是第55个按钮</button><button>这是第56个按钮</button
        ><button>这是第57个按钮</button><button>这是第58个按钮</button><button>这是第59个按钮</button
        ><button>这是第60个按钮</button><button>这是第61个按钮</button><button>这是第62个按钮</button
        ><button>这是第63个按钮</button><button>这是第64个按钮</button><button>这是第65个按钮</button
        ><button>这是第66个按钮</button><button>这是第67个按钮</button><button>这是第68个按钮</button
        ><button>这是第69个按钮</button><button>这是第70个按钮</button><button>这是第71个按钮</button
        ><button>这是第72个按钮</button><button>这是第73个按钮</button><button>这是第74个按钮</button
        ><button>这是第75个按钮</button><button>这是第76个按钮</button><button>这是第77个按钮</button
        ><button>这是第78个按钮</button><button>这是第79个按钮</button><button>这是第80个按钮</button
        ><button>这是第81个按钮</button><button>这是第82个按钮</button><button>这是第83个按钮</button
        ><button>这是第84个按钮</button><button>这是第85个按钮</button><button>这是第86个按钮</button
        ><button>这是第87个按钮</button><button>这是第88个按钮</button><button>这是第89个按钮</button
        ><button>这是第90个按钮</button><button>这是第91个按钮</button><button>这是第92个按钮</button
        ><button>这是第93个按钮</button><button>这是第94个按钮</button><button>这是第95个按钮</button
        ><button>这是第96个按钮</button><button>这是第97个按钮</button><button>这是第98个按钮</button
        ><button>这是第99个按钮</button><button>这是第100个按钮</button>
    </body>
    <script>
        var btns = document.querySelectorAll("button");
        // 正则获取
        // for (var i = 0; i < btns.length; i++) {
        //     btns[i].onclick = function () {
        //         var reg = /\d+/;
        //         alert(this.innerHTML.match(reg)[0]);
        //     };
        // }

        // 闭包获取
        // for (var i = 0; i < btns.length; i++) {
        //     for (var i = 0; i < btns.length; i++) {
        //         (function (i) {
        //             btns[i].onclick = function () {
        //                 alert(i);
        //             };
        //         })(i);
        //     }
        // }
        
        // 块作用域获取
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                alert(i);
            };
        }
    </script>
</html>
